<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="./trac.css" rel="stylesheet" type="text/css">
<script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>Trac</title>
<style type="text/css">
body {
	background: #eee;
	color: #000;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: bold;
}

h1 {
	font-size: 2em;
    padding-top: .5em;
}

h2 {
	font-size: 1.5em;
	padding-top: 1em;
	padding-bottom: .5em;
}

h3 {
	font-size: 1.25em;
}

h4 {
	font-size: 1.1em;
}

h5,h6 {
	font-size: 1em;
}

table {
	border: 1px solid RGB(183, 183, 183);
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

table td {
	border: 1px solid RGB(183, 183, 183);
	padding: .5em;
}

table thead tr {
	color: RGB(63, 63, 63);
	font-weight: bold;
}

table tbody td {
	text-align: left;
	vertical-align: top;
	height: 5.5em;
	width: 6em;
}

table colgroup.weekdays {
	
}

table colgroup.weekly-info {
	background: RGB(243, 243, 243);
}

table td.out-of-month {
	background: RGB(227, 227, 227);
}

#trac {
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: -8px 0px 0px RGBa(238, 238, 238, 0.5), 8px 0px 0px
		RGBa(238, 238, 238, 0.5), 0px 0px 8px RGBa(213, 213, 213, 1);
	-moz-box-shadow: -8px 0px 0px RGBa(238, 238, 238, 0.5), 8px 0px 0px
		RGBa(238, 238, 238, 0.5), 0px 0px 8px RGBa(213, 213, 213, 1);
	-webkit-box-shadow: -8px 0px 0px RGBa(238, 238, 238, 0.5), 8px 0px 0px
		RGBa(238, 238, 238, 0.5), 0px 0px 8px RGBa(213, 213, 213, 1);
	margin: 1em auto;
	padding: 4em;
	width: 960px;
}

#trac .trac-widget {
	margin: 1em;
}

#change-control-notification {
	
}

#change-control-notification time {
	color: #000;
	font-weight: bold;
}

#today-tracker {
	background: RGB(243, 243, 243);
	color: #666;
	font-weight: bold;
	padding: .5em;
}

#today-tracker span {
	color: #000;
	margin: 0 .5em;
}

#up-and-coming table {
	
}

#up-and-coming table td {
	height: 1em;
	line-height: 1em;
}

#summary-timeline table thead {
	background: RGB(243, 243, 243);
}

#summary-timeline table tbody tr td div {
	padding-bottom: .5em;
}

#month-view-calendar table {
	width: auto;
}
</style>
</head>
<body>
    <div id="trac">
        <div class="trac-widget" id="title">
            <h1>Project Timeline</h1>
        </div>
        <div class="trac-widget" id="change-control-notification">
            <em> This page was last modified on <time datetime=""
                    class="long">Saturday 5 May 2012 at 19:10.</time> </em>
        </div>
        <div class="trac-widget" id="today-tracker">
            Today is Day <span>10</span> of <span>23</span>
        </div>
        <div class="trac-widget" id="up-and-coming">
            <h2>Up and coming items</h2>
            <table>
                <colgroup span="3" class="">
                    <col class="">
                    <col class="">
                    <col class="">
                </colgroup>
                <tbody>
                    <tr>
                        <td style="width: 0.01%">&#x2712;</td>
                        <td>Milestone 1 Meeting</td>
                        <td>Day 7: Sunday 6 May</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="trac-widget" id="summary-timeline">
            <h2>Projected Timeline</h2>
            <table>
                <colgroup span="3" class="milestones">
                    <col class="milestone-1">
                    <col class="milestone-2">
                    <col class="milestone-3">
                </colgroup>
                <thead>
                    <tr>
                        <td>Milestone 1: Sunday 6</td>
                        <td>Milestone 2: Monday 14</td>
                        <td>Milestone 3: Sunday 20</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><div>1. Complete planning and
                                analysis</div>
                            <div>2. Establish key objectives of
                                consultation (frame our response to the
                                tender)</div>
                            <div>3. Outline key strategies and
                                principles for engaging with client
                                organization</div>
                            <div>4. Define consulting
                                organization, key roles and
                                responsibilities for team</div>
                            <div>5. Begin drafting proposal
                                document</div>
                        </td>
                        <td><div>1. Complete and review first
                                pass of draft written proposal (all
                                aspects)</div>
                            <div>2. Discuss elements of the draft
                                and overall picture of the proposal</div>
                            <div>3. Create a proposal design
                                template</div>
                            <div>4. Begin oral preparation and
                                practice for the client engagement
                                (workshop day)</div>
                            <div>5. Prepare and begin stage 2 of
                                written proposal construction</div></td>
                        <td>TBA</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="trac-widget" id="month-view-calendar">
            <h2>Detailed Calendar for the Month of May</h2>
            <table>
                <colgroup span="7" class="weekdays">
                    <col class="mon">
                    <col class="tue">
                    <col class="wed">
                    <col class="thu">
                    <col class="fri">
                    <col class="sat">
                    <col class="sun">
                </colgroup>
                <colgroup span="1" class="weekly-info">
                    <col class="weekly-days-remaining">
                </colgroup>
                <thead>
                    <tr>
                        <td>Monday</td>
                        <td>Tuesday</td>
                        <td>Wednesday</td>
                        <td>Thursday</td>
                        <td>Friday</td>
                        <td>Saturday</td>
                        <td>Sunday</td>
                        <td>Remain.</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="out-of-month"></td>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>
                            <div>6</div>
                            <div>Milestone 1 meeting</div>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                        <td>13</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>14</td>
                        <td>15</td>
                        <td>16</td>
                        <td>17</td>
                        <td>18</td>
                        <td>19</td>
                        <td>20</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>21</td>
                        <td>22</td>
                        <td>23</td>
                        <td>24</td>
                        <td>25</td>
                        <td>26</td>
                        <td>27</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>28</td>
                        <td>29</td>
                        <td>30</td>
                        <td>31</td>
                        <td class="out-of-month"></td>
                        <td class="out-of-month"></td>
                        <td class="out-of-month"></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="./trac.js"></script>
    <script type="text/javascript"></script>
</body>
</html>
